<!DOCTYPE html>
<html lang="en">

<head>
	<title>three.js webgl - materials - environment maps</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link type="text/css" rel="stylesheet" href="main.css">
</head>

<body>

	<div id="info">
		<!-- <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl environment mapping example<br />
		Equirectangular Map by <a href="http://gl.ict.usc.edu/Data/HighResProbes/">University of Southern
			California</a><br />
		Spherical Map by <a href="http://www.pauldebevec.com/Probes/">Paul Debevec</a> -->
	</div>

	<script type="module">

		import * as THREE from './three.module.js';

		// import { GUI } from './jsm/libs/dat.gui.module.js';
		import { OrbitControls } from './OrbitControls.js';

		let controls, camera, scene, renderer;
		let textureCube;//textureEquirec,
		let sphereMesh, sphereMaterial;

		init();
		animate();

		function init() {

			// CAMERAS

			camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100000);
			camera.position.set(0, 0, 1000);

			// SCENE

			scene = new THREE.Scene();

			// Lights

			const ambient = new THREE.AmbientLight(0xffffff);
			scene.add(ambient);

			// Textures

			const loader = new THREE.CubeTextureLoader();
			loader.setPath('textures/cube/Bridge2/');

			textureCube = loader.load(['posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg']);
			textureCube.encoding = THREE.sRGBEncoding;

			const textureLoader = new THREE.TextureLoader();

			// textureEquirec = textureLoader.load('textures/2294472375_24a3b8ef46_o.jpg');
			// textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
			// textureEquirec.encoding = THREE.sRGBEncoding;

			scene.background = textureCube;

			// 这是中心小球

			// const geometry = new THREE.IcosahedronGeometry(400, 15);
			// sphereMaterial = new THREE.MeshLambertMaterial({ envMap: textureCube });
			// sphereMesh = new THREE.Mesh(geometry, sphereMaterial);
			// scene.add(sphereMesh);

			//

			renderer = new THREE.WebGLRenderer();
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(window.innerWidth, window.innerHeight);
			renderer.outputEncoding = THREE.sRGBEncoding;
			document.body.appendChild(renderer.domElement);

			//

			controls = new OrbitControls(camera, renderer.domElement);
			controls.minDistance = 500;
			controls.maxDistance = 2500;

			//

			const params = {
				Cube: function () {

					scene.background = textureCube;

					sphereMaterial.envMap = textureCube;
					sphereMaterial.needsUpdate = true;

				},
				Equirectangular: function () {

					// scene.background = textureEquirec;

					// sphereMaterial.envMap = textureEquirec;
					sphereMaterial.needsUpdate = true;

				},
				Refraction: false
			};
			// 右上角的控制器
			// const gui = new GUI();
			// gui.add(params, 'Cube');
			// gui.add(params, 'Equirectangular');
			// gui.add(params, 'Refraction').onChange(function (value) {

			// 	if (value) {

			// 		textureEquirec.mapping = THREE.EquirectangularRefractionMapping;
			// 		textureCube.mapping = THREE.CubeRefractionMapping;

			// 	} else {

			// 		textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
			// 		textureCube.mapping = THREE.CubeReflectionMapping;

			// 	}

			// 	sphereMaterial.needsUpdate = true;

			// });
			// gui.open();

			window.addEventListener('resize', onWindowResize);

		}

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();

			renderer.setSize(window.innerWidth, window.innerHeight);

		}

		//

		function animate() {

			requestAnimationFrame(animate);

			render();

		}

		function render() {

			camera.lookAt(scene.position);
			renderer.render(scene, camera);

		}

	</script>

</body>

</html>